<template>
	<div class="component">
		<song-list :list='list' :listBtn='false' />
	</div>
</template>
<script>
import { song } from 'api/artist'
import Song from '@/entity/Song'
import SongList from 'base/song-list'

export default {
	components: {
		SongList
	},
	props: {
		id: [String, Number]
	},
	data() {
		return {
			list: [],
			promise: null
		}
	},
	methods: {
    getSong() {
			if (!this.id) return
      this.promise = song(this.id).then(res => {
        this.list = res.songs.map(item => new Song(item))
      })
		},
	},
	watch: {
		id() {
			this.getSong()
		}
	}
}
</script>
<style lang="less" scoped>
.component{
	width: 100%;
	min-height: 1px;
}
</style>